<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-10-19 09:57:37
 * @LastEditTime: 2020-08-12 16:25:09
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="container">
    <van-nav-bar title="环形进度条组件" fixed :border="false" left-arrow @click-left="$router.go('-1')" />
    <div class="content">
      <van-tag mark type="primary">loading图</van-tag>
      <div class="loading">
        <div class="loading1"></div>
        <div class="loading2"></div>
      </div>
      <van-tag mark type="danger">表单验证</van-tag>
      <form
        class="form-validation"
        @submit.prevent="submit"
        enctype="application/x-www-form-urlencoded"
      >
        <div>
          <label>名字</label>
          <input
            type="text"
            name="username"
            v-model="username"
            placeholder="请输入你的名字(1到10个中文)"
            pattern="^[\u4e00-\u9fa5]{1,10}$"
            required
          />
        </div>
        <div>
          <label>手机</label>
          <input
            type="text"
            name="mobile"
            v-model="mobile"
            placeholder="请输入你的手机"
            pattern="^1[3456789]\d{9}$"
            required
          />
        </div>
        <div>
          <label>简介</label>
          <textarea required name="introduction" v-model="introduction"></textarea>
        </div>
        <van-button size="small" color="linear-gradient(to right, #4bb0ff, #6149f6">提交</van-button>
      </form>
      <van-tag mark type="primary">超出两行省略号</van-tag>
      <div
        class="ellipsis"
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus laudantium voluptates necessitatibus aut officiis architecto sunt quibusdam tempora repudiandae. Quo doloremque ex eos eius ullam consequuntur quasi, modi voluptatibus ratione?</div>
      <van-tag mark type="danger">:active使用</van-tag>
      <div>
        <button class="btn_">button按钮</button>
        <a class="btn_a">a链接按钮</a>
      </div>
      <van-tag mark type="primary">wave波浪</van-tag>
      <div class="wave">
        <div class="circle wave1"></div>
        <div class="circle wave2"></div>
        <div class="circle wave3"></div>
        <div class="circle wave4"></div>
        <div class="circle wave5"></div>
      </div>
      <van-tag mark type="danger">抖音</van-tag>
      <!-- 抖音字体 -->
      <div class="shake">
        <div class="logo"></div>
        <div class="logo_"></div>
      </div>
      <van-tag mark type="danger">字体效果</van-tag>
      <!-- 抖音字体 -->
      <div class="font">抖音字体</div>
      <h1 class="douyin">特色字体</h1>
      <!-- 字体特效 -->
      <h1 class="wave_font">波纹疾走</h1>
      <!--  -->
      <div class="transparent">字体模糊效果</div>
        <van-tag mark type="danger">卡片效果</van-tag>
        <div class="card">
            <div class="g-both">字体投影效果</div>
        </div>
      </div>
      <van-tag mark type="danger">字体效果</van-tag>
      <div class="animate_font">
        折木的空间
      </div>
      <div  class="progress" :style="{width:progress+'%',background:color}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      mobile: "",
      introduction: "",
      progress:0,
      timer:null,
      color:'red'
    };
  },
  methods: {
    submit() {
      console.log("submit");
    }
  },
  watch:{
    progress(newval,oldval){
      if(newval>=100){
        this.delProgress();
      }
      if(newval<=0){
        this.addProgress();
      }
    }
  },
  mounted(){
    this.addProgress();
  },
  methods:{
    // 进度增加
    addProgress(){
      clearInterval(this.timer);
      this.$nextTick(()=>{
        this.timer = setInterval(()=>{
          this.progress+=1;
          if(this.progress>=100){
            clearInterval(this.timer);
            this.color = 'blue';
          }
        },16)
      })
    },
    // 进度减少
    delProgress(){
      clearInterval(this.timer);
      this.timer = setInterval(()=>{
        this.progress-=1;
        if(this.progress<=0){
          clearInterval(this.timer);
          this.color = 'red';
        }
      },16)
    }
  },
  beforeDestroy(){
    clearInterval(this.timer);
  }
};
</script>
<style lang="less" scoped>
.progress{
  width:0%;
  height: 10px;
  // transition: all 16.7ms linear;
  background: red;
}
.animate_font{
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    animation: masked-animation 4s infinite linear;
    text-align: center;
    font-weight: 600;
    font-size: 24px;
}
@keyframes masked-animation {
    0%{ background-position: 0 0;}
    100% { background-position: -100% 0;}
}
.card{
    position: relative;
    width: 95%;
    height: 100px;
    font-size: 18px;
    line-height: 100px;
    text-align: center;
    margin: 30px auto;
}
.g-both {
    background: hsl(199, 98%, 48%);
}

.g-both::before {
    content: "";
    position: absolute;
    left: 2%;
    bottom: 5%;
    width: 40%;
    height: 20%;
    border-radius: 10px;
    background: hsl(199, 98%, 20%);
    transform: rotate(-2deg);
    box-shadow: 0 0 10px 6px hsl(199, 98%, 20%);
    z-index: -1;
}

.g-both::after {
    content: "";
    position: absolute;
    right: 2%;
    bottom: 5%;
    width: 40%;
    height: 20%;
    border-radius: 10px;
    background: hsl(199, 98%, 20%);
    transform:  rotate(2deg);
    box-shadow: 0 0 10px 6px hsl(199, 98%, 20%);
    z-index: -1;
}
.douyin{
  height: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  font-weight: bolder;
  background-color: #000;
  color: #fff;
  font-size: 40px;
  text-shadow: #fe2d52 -1px -3px, #2addfd 3px 0px;
  animation: shake_font ease-in-out 1s infinite normal both running;
}
@keyframes shake_font {
    0% {
        text-shadow:none;
    }
    25% {
        text-shadow:#2addfd 3px 0px, #fe2d52 -1px -3px; 
    }
    50% {
        text-shadow: #fe2d52 1px 0px, #2addfd 1px 2px;
    }
    75% {
        text-shadow: #2addfd 2px 1px,#fe2d52 0px -1px;
    }
    100% {
        text-shadow: #fe2d52 -1px -3px, #2addfd 3px 0px;
    }
}
.transparent {
  color: transparent;
  font-size: 24px;
  text-shadow: #111 0 0 3px;
  text-align: center;
}
.wave_font {
  width: 100%;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #4e6087;
  position: relative;
  font-size: 24px;
  box-sizing: border-box;
  margin-bottom: 20px;
  &:before {
    animation: wave_font 3s infinite linear alternate-reverse;
    left: -2px;
    text-shadow: 1px 0 #00f;
  }
  &:after {
    animation: wave_font 2s infinite linear alternate-reverse;
    left: 2px;
    text-shadow: -1px 0 #f00;
  }
  &:after,
  &:before {
    width: 100%;
    text-align: center;
    background: #fcfdff;
    clip: rect(0, 900px, 0, 0);
    color: #4e6087;
    content: "波纹疾走";
    overflow: hidden;
    position: absolute;
    top: 0;
  }
  @keyframes wave_font {
    0% {
      -webkit-clip: rect(6px, 9999px, 15px, 0);
      clip: rect(6px, 9999px, 15px, 0);
    }
    5% {
      -webkit-clip: rect(15px, 9999px, 47px, 0);
      clip: rect(15px, 9999px, 47px, 0);
    }
    10% {
      -webkit-clip: rect(44px, 9999px, 44px, 0);
      clip: rect(44px, 9999px, 44px, 0);
    }
    15% {
      -webkit-clip: rect(24px, 9999px, 80px, 0);
      clip: rect(24px, 9999px, 80px, 0);
    }
    20% {
      -webkit-clip: rect(89px, 9999px, 38px, 0);
      clip: rect(89px, 9999px, 38px, 0);
    }
    25% {
      -webkit-clip: rect(88px, 9999px, 10px, 0);
      clip: rect(88px, 9999px, 10px, 0);
    }
    30% {
      -webkit-clip: rect(86px, 9999px, 12px, 0);
      clip: rect(86px, 9999px, 12px, 0);
    }
    35% {
      -webkit-clip: rect(79px, 9999px, 28px, 0);
      clip: rect(79px, 9999px, 28px, 0);
    }
    40% {
      -webkit-clip: rect(83px, 9999px, 25px, 0);
      clip: rect(83px, 9999px, 25px, 0);
    }
    45% {
      -webkit-clip: rect(88px, 9999px, 45px, 0);
      clip: rect(88px, 9999px, 45px, 0);
    }
    50% {
      -webkit-clip: rect(14px, 9999px, 45px, 0);
      clip: rect(14px, 9999px, 45px, 0);
    }
    55% {
      -webkit-clip: rect(23px, 9999px, 58px, 0);
      clip: rect(23px, 9999px, 58px, 0);
    }
    60% {
      -webkit-clip: rect(48px, 9999px, 80px, 0);
      clip: rect(48px, 9999px, 80px, 0);
    }
    65% {
      -webkit-clip: rect(98px, 9999px, 18px, 0);
      clip: rect(98px, 9999px, 18px, 0);
    }
    70% {
      -webkit-clip: rect(89px, 9999px, 60px, 0);
      clip: rect(89px, 9999px, 60px, 0);
    }
    75% {
      -webkit-clip: rect(33px, 9999px, 52px, 0);
      clip: rect(33px, 9999px, 52px, 0);
    }
    80% {
      -webkit-clip: rect(36px, 9999px, 88px, 0);
      clip: rect(36px, 9999px, 88px, 0);
    }
    85% {
      -webkit-clip: rect(35px, 9999px, 43px, 0);
      clip: rect(35px, 9999px, 43px, 0);
    }
    90% {
      -webkit-clip: rect(51px, 9999px, 41px, 0);
      clip: rect(51px, 9999px, 41px, 0);
    }
    95% {
      -webkit-clip: rect(44px, 9999px, 73px, 0);
      clip: rect(44px, 9999px, 73px, 0);
    }
    100% {
      -webkit-clip: rect(24px, 9999px, 31px, 0);
      clip: rect(24px, 9999px, 31px, 0);
    }
  }
}

.font {
  height: 50px;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  font-weight: bolder;
  background-color: #000;
  color: #fff;
  font-size: 40px;
  text-shadow: #fe2d52 -1px -3px, #2addfd 3px 0px;
}
.shake {
  width: 100%;
  position: relative;
  background-color: #000;
  height: 300px;
  .logo {
    width: 20px;
    height: 120px;
    background-color: #24f6f0;
    position: absolute;
    left: 200px;
    top: 50px;
  }
  .logo:after {
    content: "";
    position: absolute;
    top: -50px;
    right: -70px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 20px solid #24f6f0;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-45deg);
  }
  .logo:before {
    content: "";
    position: absolute;
    bottom: -40px;
    right: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 20px solid #24f6f0;
    border-top-color: transparent;
    transform: rotate(45deg);
  }
  .logo_ {
    width: 20px;
    height: 120px;
    background-color: #fe2d52;
    position: absolute;
    left: 205px;
    top: 55px;
  }
  .logo_:after {
    content: "";
    position: absolute;
    top: -50px;
    right: -70px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 20px solid #fe2d52;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-45deg);
  }
  .logo_:before {
    content: "";
    position: absolute;
    bottom: -40px;
    right: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 20px solid #fe2d52;
    border-top-color: transparent;
    transform: rotate(45deg);
  }
  .logo_ {
    mix-blend-mode: lighten;
  }
}
.loading {
  display: flex;
  flex-wrap: wrap;
  div {
    flex-shrink: 0;
  }
}
.loading1 {
  width: 30px;
  height: 30px;
  margin: 20px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  animation: run_circle 1s linear infinite;
}
@keyframes run_circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading2 {
  margin: 20px;
  width: 40px;
  height: 40px;
  position: relative;
  background-color: rgb(100, 87, 219);
  &::before,
  &::after {
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    border: 5px solid;
    content: "";
    box-sizing: border-box;
    animation: move 2s linear infinite;
  }
  &::before {
    border-color: pink;
  }
  &::after {
    border-color: purple;
    animation-delay: -1s;
  }
}
@keyframes move {
  0%,
  100% {
    clip: rect(0 50px 5px 0);
  }
  25% {
    clip: rect(0px 50px 50px 45px);
  }
  50% {
    clip: rect(45px 50px 50px 0);
  }
  75% {
    clip: rect(0 5px 50px 0);
  }
}
.form-validation {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  div {
    margin-top: 10px;
    margin-bottom: 10px;
    &:first-child {
      margin-top: 0;
    }
  }
  label {
    display: block;
    padding-bottom: 5px;
    font-size: 14px;
  }
  input,
  textarea {
    font-family: "微软雅黑";
    display: block;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 20px;
    outline: none;
    border: 1px solid #ccc;
    width: 100%;
    height: 40px;
    caret-color: blueviolet;
    transition: all 300ms;
    &:valid {
      border-color: rgb(22, 89, 214);
      box-shadow: inset 5px 0 0 rgb(22, 89, 214);
    }
    &:invalid {
      border-color: rgb(236, 46, 46);
      box-shadow: inset 5px 0 0 rgb(236, 46, 46);
    }
  }
  textarea {
    height: 80px;
    resize: none;
    line-height: 30px;
    font-size: 14px;
  }
}
.btn_ {
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
  margin: 5px;
  border: 1px solid #eee;
}
.btn_:active {
  background-color: #eee;
}
.btn_a {
  font-size: 16px;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
  margin: 5px;
  border: 1px solid #eee;
  background-color: rgb(59, 48, 207);
}
.btn_a:active {
  background-color: rgb(35, 21, 224);
}
.ripple {
  padding: 10px;
  margin: 10px;
}
.touch_ripple_wrap {
  margin: 20px;
  font-size: 18px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 2px 2px 10px 2px rgba(255, 0, 0, 0.1);
  h5 {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
  }
}
.wave {
  width: 100vw;
  height: 100px;
  position: relative;
  background-color: #fff;
  z-index: 0;
  transform: rotate(180deg);
  overflow: hidden;
  .circle {
    position: absolute;
    width: 2000px;
    height: 2000px;
    border-radius: 45%;
    bottom: 45px;
  }
  .wave1 {
    left: -1000px;
    background-color: rgba(26, 166, 252, 0.5);
    animation: 10s roll linear infinite;
    bottom: 35px;
  }
  .wave2 {
    left: -600px;
    background-color: rgba(26, 166, 252, 0.3);
    animation: 10s roll linear infinite;
    bottom: 70px;
  }
  .wave3 {
    left: -700px;
    background-color: rgba(26, 166, 252, 0.5);
    animation: 10s roll linear infinite;
  }
  .wave4 {
    left: -800px;
    background-color: rgba(26, 166, 252, 1);
    animation: 10s roll linear infinite;
    bottom: 50px;
  }
  .wave5 {
    left: -900px;
    background-color: rgba(26, 166, 252, 0.5);
    animation: 10s roll linear infinite;
  }
}
@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ellipsis {
  box-sizing: border-box;
  margin: 20px auto;
  line-height: 25px;
  padding: 0 20px;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>